<template name='customer'>
  <view>
      <u-sticky>
          <view class="box">
              <view class="liubai">

              </view>
              <view class="title">
                  咨询订单
              </view>
              <view class="nav">
                      <view class="left">
                          <view class="" v-for="(i,index) in nav" :key="index" :class="ind==index?'vi':''" @click="switchs(index)">
                              {{i.title}}
                          </view>
                      </view>
                  <!-- <view class="right" @click="show2 = true">
                      {{start}}<u-icon name="arrow-down" size='10' color='#fff'></u-icon>
                  </view> -->
              </view>
          </view>

      </u-sticky>
    <view class="flex-col group_1">
      <view class="flex-col">
        <!-- <view class="flex-col section_1">
          <view class="flex-row group_2">
            <text class="text_1">图文咨询</text>
            <text class="text_2" @click="onClickText_2">电话咨询</text>
            <text class="text_3" @click="onClickText_3">包月咨询</text>
            <image
              src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558230263781093443.png"
              class="image_2"
            />
            <text class="text_4">已结束</text>
            <image
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558230250143808631.png"
              class="image_3 image_4"
            />
            <text class="text_5">全部</text>
            <image
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558230250143808631.png"
              class="image_3 image_5"
            />
          </view>
        </view> -->
        <view class="flex-col group_3">
          <view class="list">
              <view class="" style="text-align: center;margin-top: 50rpx;" v-if="list_tjLSG753.length==0">
                  <image src="../../static/dingdan.png" mode="scaleToFill" style="margin-top: 100rpx;width: 150rpx;height: 160rpx;"></image>
                  <view class="" style="color: #999;font-size: 28rpx;margin-top: 20rpx;">
                      暂无客户
                  </view>
              </view>
            <view class="flex-col list-item" :key="i" v-for="(item, i) in list_tjLSG753"  @click="onClickView_11(item.consultingWay)">
              <view class="flex-row group_4">
                <view class="flex-row group_5">
                  <image
                    :src="item.wx_avatar"
                    class="image_6"
                  />
                  <view class="flex-col group_6">
                    <text class="text_6">{{item.user_name ? item.user_name : ''}}</text>
                    <view class="flex-row group_7" style="display: flex;align-items: center;">
                      <image
                        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558230250088643308.png"
                        class="image_8"
                      />
                     <text class="text_10">{{item.area ? item.area : '未知'}}</text>
                     <view class="section_4"><!--*--></view>

                      <view v-if="item.consultingWay==1">
                        <text class="text_12">预约时间：{{ item.start_time ? item.start_time : '' }}</text>
                      </view>

                    </view>
                  </view>

                </view>
                <view class="">
                     <view class="text_14">下单时间：{{item.create_time}}</view>
                     <view class="" style="text-align: right;font-size: 24rpx;color: #FF1A00;margin-top: 20rpx;margin-right: 20rpx;">
                         ￥{{item.actual_price}}
                     </view>
                </view>

              </view>
              <view class="justify-between section_5"  v-show="item.service_type==2">
                <view class="flex-row group_8">
                  <image
                    src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558155417130254521.png"
                    class="image_10"
                  />
                  <text class="text_18">文字咨询</text>
                </view>
                <view v-if='ind==0' class="flex-col items-center text-wrapper " @click="texts(item)">
                  <text class="text_20">进入咨询室</text>
                </view>
                <view  v-if='ind==1' class="flex-col items-center text-wrapperkk">
                  <text  class="text_18s">已完成</text>
                </view>
                <view  v-if='ind==2' class="flex-col items-center  text-wrapperkk">
                  <text   class="text_18s">已取消</text>
                </view>
              </view>

              <view class="justify-between section_5"  v-show="item.service_type!=2">
                <view class="flex-row group_8">
                  <image
                    src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558118111936603149.png"
                    class="image_10"
                  />
                  <text class="text_18">电话咨询</text>
                </view>
                <view  v-if='ind==0' class="flex-col items-center text-wrapper1"  @click.stop="phones()">
                  <text class="text_20">联系客户</text>
                </view>
               <view  v-if='ind==1' class="flex-col items-center text-wrapperkk">
                 <text  class="text_18s">已完成</text>
               </view>
               <view  v-if='ind==2' class="flex-col items-center  text-wrapperkk">
                 <text   class="text_18s">已取消</text>
               </view>
              </view>

              <view class="justify-between section_5" v-show="item.consultingWay==99"> <!-- v-show="item.consultingWay==2 -->
                <view class="flex-row group_8">
                  <image
                    src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558155417132973951.png"
                    class="image_10"
                  />
                  <text class="text_18">包月咨询</text>
                </view>
                <view  v-if='ind==0' class="flex-col items-center text-wrapper2" style="  background-color: #fea14a;" @click.stop="phones()">
                  <text class="text_20">联系客户</text>
                </view>
                <view  v-if='ind==1' class="flex-col items-center text-wrapperkk">
                  <text  class="text_18s">已完成</text>
                </view>
                <view  v-if='ind==2' class="flex-col items-center  text-wrapperkk">
                  <text   class="text_18s">已取消</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getCustomerManagement, getCustomerManagementReward} from '../../api/api.js'
import {consultingOrder} from '@/api/index.js'
  export default {
      name: 'customer',
      props: {
      	cur: String,
      },
    components: {},
    data() {
      return {
        pageInfo: {
          pageIndex: 1,
          pageSize: 10
        },
          start:'全部',
          startValue: '2',
          ind:0,
        list_tjLSG753: [
           
        ],
        nav:[
            {
                title:'未完成',
                value: '0'
            },
            {
                title:'已完成',
                value: '1'
            },
            {
                title:'已取消',
                value: '2'
            }
        ],
      };
    },
    created() {
      this.list(1)
    },
    mounted() {

      /*uni.$on('Bottom',()=>{
        this.pageInfo.pageIndex += 1
        setTimeout(() => {
          this.list();
        }, 500)
      })*/
    },
    methods: {
      list(status) {
		 
		  let data = {
			  status:status
		  }
		  consultingOrder(data).then(res=>{
			  this.list_tjLSG753 = res.data
		  })

      },
        phones(){
            uni.navigateTo({
                url:'/pages/myorder/phone?expertsId='
                // +this.list_YhKWZRNv.expertsId
            })
        },
        texts(){
          uni.navigateTo({
               url:'/pages/myorder/imageText'
          })
        },
        switchs(index){
          this.pageInfo.pageIndex = 1
          this.ind = this.nav[index].value
		  //console.log(this.ind )
		  let d = 99;
		   this.list_tjLSG753 = []
		   if(this.ind == 0){
			   d = 1
		   }else if (this.ind == 1) {
			   d = 6
		   }else{
			   d = 5
		   }
		   this.list(d)
        },
        onClickView_11(consultingWay){
            if(consultingWay!=0){
               uni.navigateTo({
                   url:'/subPackages/pages/user2/telephoneRecord'
               })
            }else{
                uni.navigateTo({
                     url:'/pages/myorder/imageText'
                })
            }

        }
    },
  };
</script>

<style scoped lang="scss">
    .box{
        background-color: #1989E1;
        text-align: center;
    }
    .liubai{
         height: var(--status-bar-height);
        width: 100%;
    }
    .title{
       color: #fff;
       padding: 15rpx 0 ;
    }
    .nav{
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #fff;
        padding:15rpx 20rpx 5rpx;
            .left{
                width: 100%;
                display: flex;
                justify-content: space-around;
                view{
                    margin-right: 30rpx;
                    padding: 20rpx 0;
                }
                .vi{
                    padding: 20rpx 0 18rpx;
                     border-bottom: 2rpx solid #fff;
                }
            }

        // .right{
        //     display: flex;
        //     align-items: center;
        //   position: absolute;
        //   right: 26px;
        // }
        // .right1{
        //    margin: 0 15rpx;
        // }
    }
  .image_3 {
    flex-shrink: 0;
    width: 0.47rem;
    height: 0.34rem;
  }
  .list-item {
    padding-left: 0.94rem;
    padding-bottom: 1rem;
    background-color: #ffffff;
    border-radius: 0.47rem;
  }
  .equal-division-item {
    margin-left: 0.16rem;
    flex: 1 1 5.75rem;
    padding: 0.23rem 0 0.31rem;
  }
  .group_4 {
    padding: 0.88rem 0 0.97rem;
  }
  .section_5 {
    margin-right: 1.09rem;
    padding: 0.59rem 0.72rem 0.59rem 0.97rem;
    background-color: #eceeff;
    border-radius: 0.47rem;
    align-items: center;
  }
  .image_20 {
    width: 1.5rem;
    height: 1.5rem;
  }
  .group_5 {
    margin-top: 0.16rem;
    flex: 1 1 auto;
  }
  .text_14 {
    margin-left: 0.53rem;
    color: #999999;
    font-size: 0.63rem;
    font-family: SourceHanSansCN;
    line-height: 0.59rem;
  }
  .text_16 {
    color: #999999;
    font-size: 0.63rem;
    font-family: SourceHanSansCN;
    line-height: 0.59rem;
  }
  .group_8 {
    margin: 0.31rem 0 0.22rem;
    align-items: center;
  }

  .text-wrapper {
    padding: 0.41rem 0 0.38rem;
    background-image: linear-gradient(0deg, #ff4b56 0%, #ff767e 100%, #ff767e 100%);
    border-radius: 0.72rem;
    width: 4.69rem;
  }
  .text-wrapperkk{
      padding: 0.41rem 0 0.38rem;
      background-color: #fff;
      border-radius: 0.72rem;
      width: 4.69rem;
  }
  .text-wrapper1 {
    padding: 0.41rem 0 0.38rem;
    //background-image: linear-gradient(0deg, #fea14a 0%, #ffd779 100%);
    background-image: linear-gradient(0deg, #ff4b56 0%, #ff767e 100%, #ff767e 100%);
    border-radius: 0.72rem;
    width: 4.69rem;
    height: 1.44rem;
  }
  .text-wrapper2 {
    padding: 0.41rem 0 0.38rem;
    background-image: linear-gradient(0deg, #ff4b56 0%, #ff767e 100%, #ff767e 100%);
    border-radius: 0.72rem;
    width: 4.69rem;
    height: 1.44rem;
  }
  .text-wrapper3 {
    padding: 0.28rem 0 0.19rem;
    background-color: #6d79fe;
    border-radius: 0.16rem;
    width: 2.06rem;
    height: 1.13rem;
  }
  .text-wrapper4 {
    padding: 0.28rem 0 0.19rem;
    background-color: #ff55ff;
    border-radius: 0.16rem;
    width: 2.06rem;
    height: 1.13rem;
  }
  .text_26 {
    margin-left: 0.22rem;
    color: #fea14a;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.72rem;
  }
  .text_188 {
    color: #ffffff;
    font-size: 0.69rem;
    font-family: SourceHanSansCN;
    font-weight: 700;
    line-height: 0.66rem;
  }
  .text_202 {
    margin: 0.094rem 0 0.16rem 0.41rem;
    color: #363636;
    font-size: 0.88rem;
    font-family: SourceHanSansCN;
    font-weight: 700;
    line-height: 0.88rem;
    width: 60vw;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .text_222 {
    color: #999999;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    font-weight: 700;
    line-height: 1.09rem;
    width: 75vw;
     overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .text_242 {
    color: #999999;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    font-weight: 700;
    line-height: 1.09rem;
  }
  .group_88 {
    margin-top: 0.48rem;
    line-height: 1.09rem;
  }
  .image_6 {
    flex-shrink: 0;
    width: 2.81rem;
    height: 2.81rem;
    border-radius: 100%;
  }
  .group_6 {
    margin-left: 0.41rem;
    flex-shrink: 0;
    align-self: center;
  }
  .text_10 {
    color: #666666;
    font-size: 0.63rem;
    font-family: SourceHanSansCN;
    line-height: 0.59rem;
    margin-right: 15rpx;
  }
  .section_4 {
    margin-left: 0.16rem;
    flex-shrink: 0;
    background-color: #d2d2d2;
    width: 0.031rem;
    height: 0.56rem;
  }
  .text_12 {
    margin-left: 0.5rem;
    color: #666666;
    font-size: 0.63rem;
    font-family: SourceHanSansCN;
    line-height: 1.59rem;
  }
  .image_10 {
    flex-shrink: 0;
    filter: drop-shadow(0px 0.094rem 0.13rem #f53d4842);
    width: 0.91rem;
    height: 0.91rem;
  }
  .image_101 {
    width: 0.75rem;
    height: 0.75rem;
  }
  .text_18 {
    margin-left: 0.31rem;
    margin-bottom: 0.13rem;
    color: #333333;
   font-size: 0.69rem;
   font-family: SourceHanSansCN;
   line-height: 0.66rem;
  }
  .text_18s{
    margin-left: 0.31rem;
    color: #999;
   font-size: 0.69rem;
   font-family: SourceHanSansCN;
   line-height: 0.66rem;
  }
  .group_9 {
    margin-top: 0.77rem;
    padding: 0 0.063rem;
  }
  .text_20 {
    color: #ffffff;
    font-size: 0.69rem;
    font-family: SourceHanSansCN;
    line-height: 0.66rem;
  }
  .text_6 {
    color: #333333;
    font-size: 1rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.75rem;
  }
  .group_7 {
    margin-top: 0.56rem;
  }
  .image_8 {
    flex-shrink: 0;
    width: 0.56rem;
    height: 0.75rem;
    margin-right: 15rpx;
    border-radius: 100rpx;
  }
  .text_8 {
    margin: 0 0.19rem 0.094rem 0.28rem;
    color: #666666;
    font-size: 0.63rem;
    font-family: SourceHanSansCN;
    line-height: 0.59rem;
  }
  .text_44 {
    margin-top: 0.2rem;
  }
  .page {
    background-color: #f5f5f5;
    border-bottom: solid 0.28rem #ffffff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .group_1 {
    flex: 1 1 auto;
    overflow-y: auto;
  }
  .section_1 {
    padding: 0 0.84rem;
    background-color: #6d79fe;
  }
  .group_3 {
    padding-top: 0.91rem;
    position: relative;
  }
  .group_2 {
    padding: 1.06rem 0.094rem 0.41rem 0.13rem;
  }
  .section_44{
    margin-right: 0.84rem;
    padding: 0.97rem 0.94rem 1.13rem;
    background-color: #eceeff;
    border-radius: 0.47rem;
  }
  .section_2 {
    align-self: flex-start;
    background-color: #ffffff;
    border-radius: 0.078rem;
    width: 3.13rem;
    height: 0.16rem;
  }
  .list {
    margin-left: 0.94rem;
    margin-right: 0.88rem;
  }
  .equal-division {
    padding: 0.16rem 0.23rem 0;
    background-color: #ffffff;
    box-shadow: 0px 0.13rem 2.13rem #7d7d7d3d;
    position: absolute;
    left: 0;
    right: 0;
    top: 32.13rem;
  }
  .text_1 {
    color: #ffffff;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.72rem;
  }
  .text_2 {
    margin-left: 1.34rem;
    color: #ffffff;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.75rem;
  }
  .text_3 {
    margin-left: 1.31rem;
    color: #ffffff;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.75rem;
  }
  .image_2 {
    margin-left: 1.41rem;
    flex-shrink: 0;
    width: 1.81rem;
    height: 0.78rem;
  }
  .text_4 {
    margin-left: 0.66rem;
    color: #ffffff;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.72rem;
  }
  .image_4 {
    margin: 0.22rem 0 0.22rem 0.22rem;
  }
  .text_5 {
    margin-left: 0.84rem;
    color: #ffffff;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.72rem;
  }
  .image_5 {
    margin: 0.22rem 0 0.22rem 0.25rem;
  }
  .list-item:not(:first-of-type) {
    margin-top: 0.94rem;
  }
  .group_10 {
    margin-left: 0;
  }
  .text_45 {
    color: #9dabc0;
    font-size: 0.63rem;
    font-family: SourceHanSansCN;
    line-height: 0.59rem;
  }
  .text_46 {
    color: #6d79fe;
    font-size: 0.63rem;
    font-family: SourceHanSansCN;
    line-height: 0.59rem;
  }
  .text_47 {
    color: #9dabc0;
    font-size: 0.63rem;
    font-family: SourceHanSansCN;
    line-height: 0.59rem;
  }
  .text_48 {
    color: #9dabc0;
    font-size: 0.63rem;
    font-family: SourceHanSansCN;
    line-height: 0.59rem;
  }
</style>
